<template>
  <div class="item_box">
    <div>
			<p class="title_1 mb10">年报信息</p>
			<el-tabs type="card" v-model="activeName0" @tab-click="handleClick">
      <el-tab-pane name="2023" label="2023年度报告">
      </el-tab-pane>
      <el-tab-pane name="2022" label="2022年度报告">
      </el-tab-pane>
      <el-tab-pane name="2021" label="2021年度报告">
      </el-tab-pane>
			<el-tab-pane name="2020" label="2020年度报告">
      </el-tab-pane>
			<el-tab-pane name="2019" label="2019年度报告">
      </el-tab-pane>
			<el-tab-pane name="2018" label="2018年度报告">
      </el-tab-pane>
    </el-tabs>
		<div>
			<div class="title_2 mb10 mt10">基本信息</div>
			<el-descriptions
				v-loading="loading"
				title=""
				:column="3"
				label-align="right"
				:border="true"
			>
				<el-descriptions-item label="年报名称" width="100" label-align="right">
					<span>{{activeName0}}年报报告</span>
				</el-descriptions-item>
				<el-descriptions-item label="年报日期" width="100" label-align="right">
					<span>{{activeName0}}.01.01</span>
				</el-descriptions-item>
				<el-descriptions-item label="净利润" width="100" label-align="right">
					<span>企业选择不公示</span>
				</el-descriptions-item>
				<el-descriptions-item label="负债总额" width="100" label-align="right">
					<span>1,090,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="实际员工数量" width="100" label-align="right">
					<span>300</span>
				</el-descriptions-item>
				<el-descriptions-item label="销售总额" width="100" label-align="right">
					<span>12,090,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="利润总额" width="100" label-align="right">
					<span>1,090,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="所有者权益合计" width="100" label-align="right">
					<span>1,090,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="纳税总额" width="100" label-align="right">
					<span>2,590,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="主营业务收入" width="100" label-align="right">
					<span>2,090,909</span>
				</el-descriptions-item>
				<el-descriptions-item label="主营业务" width="100" label-align="right">
					<span>计算机配件、机械设备、通讯器材、仪器仪表...</span>
				</el-descriptions-item>
			</el-descriptions>
		</div>
			<div class="title_2 mb10 mt10">对外投资信息</div>
      <el-table
        v-loading="loading"
        :data="list_0"
      >
        <el-table-column label="投资名称" align="center" prop="empName" :show-overflow-tooltip="true"/>
        <el-table-column label="工商注册号" align="center" prop="empDepartName" :show-overflow-tooltip="true"/>
        <el-table-column label="投资资金" align="center" prop="positionname" :show-overflow-tooltip="true"/>
        <el-table-column label="投资比例" align="center" prop="officePhone" :show-overflow-tooltip="true"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
		<div>
			<div class="title_2 mb10 mt10">对外提供担保信息</div>
      <el-table
        v-loading="loading"
        :data="list_1"
      >
        <el-table-column label="债权人" align="center" prop="linkmanName" :show-overflow-tooltip="true"/>
        <el-table-column label="债务人" align="center" prop="linkmanMobile" :show-overflow-tooltip="true"/>
        <el-table-column label="主债权种类" align="center" prop="linkmanMail" :show-overflow-tooltip="true"/>
        <el-table-column label="主债权数额" align="center" prop="linkmanDept" :show-overflow-tooltip="true"/>
				<el-table-column label="履行债务的期限" align="center" prop="empName" :show-overflow-tooltip="true"/>
        <el-table-column label="保证的期限" align="center" prop="empDepartName" :show-overflow-tooltip="true"/>
        <el-table-column label="保证的方式" align="center" prop="positionname" :show-overflow-tooltip="true"/>
        <el-table-column label="保证的范围" align="center" prop="officePhone" :show-overflow-tooltip="true"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
		<div>
			<div class="title_2 mb10 mt10">注册资本实缴信息</div>
      <el-table
        v-loading="loading"
        :data="list_1"
      >
        <el-table-column label="投资总额" align="center" prop="linkmanName" :show-overflow-tooltip="true"/>
        <el-table-column label="中方注册资本" align="center" prop="linkmanMobile" :show-overflow-tooltip="true"/>
        <el-table-column label="外方注册资本" align="center" prop="linkmanMail" :show-overflow-tooltip="true"/>
        <el-table-column label="中方实缴资本" align="center" prop="linkmanDept" :show-overflow-tooltip="true"/>
				<el-table-column label="外方实缴资本" align="center" prop="empName" :show-overflow-tooltip="true"/>
        <el-table-column label="出资方式和金额" align="center" prop="empDepartName" :show-overflow-tooltip="true"/>
        <el-table-column label="中方本年应出资" align="center" prop="positionname" :show-overflow-tooltip="true"/>
        <el-table-column label="外方本年应出资" align="center" prop="officePhone" :show-overflow-tooltip="true"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from "vue"

	const props = defineProps({
		activeName: {
			type: String,
		},
	})

	const activeName0 = ref('2023')

  const list_0 = ref([])
  const list_1 = ref([])
  const loading = ref(false)
  const total = ref(0)

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
  })

  const { queryParams } = toRefs(data)

  const getList = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 300);
  }
  const handleClick = (val) => {
		loading.value = true
		setTimeout(() => {
			loading.value = false
		}, 300);
  }
  const exportList = () => {
    
  }
  getList()

	watch(() => props.activeName, (val) => {
		getList()
	})
</script>
<style lang="scss" scoped>
</style>
